<script setup>
import PostDetailContentComment from './PostDetailContentComment.vue'
import PostDetailContentMain from './PostDetailContentMain.vue'
import { usePostCommentQuery } from '@/composables/usePostDataQuery'

const props = defineProps({
  postId: Number,
  data: Object,
  isGallery: {
    type: Boolean,
    default: false,
  },
})
const emit = defineEmits(['refresh'])

const postId = computed(() => props.postId)

const { data: commentData, fetchNextPage, hasNextPage, isFetching, isLoading, refetch } = usePostCommentQuery(postId)

const loadMore = () => {
  if (isFetching.value) return
  fetchNextPage()
}
const refresh = () => {
  console.log('refresh1')
  emit('refresh')
}
console.log('data', props.data);

watch(() => props.data, (newVal) => {
  if (newVal) {
    refetch()
  }
})

</script>

<template>
  <div v-infinite-scroll="loadMore" :infinite-scroll-disabled="isFetching || !hasNextPage" :infinite-scroll-distance="5"
    class="flex flex-col grow overflow-y-auto h-full">
    <PostDetailContentMain :data="data" :isGallery="isGallery" @refresh="refresh" />
    <!-- <PostDetailContentMain v-if="data" :data="data" :isGallery="isGallery" @refresh="refresh" /> -->

    <div class="bg-[--line-1] h-2 flex-shrink-0"></div>

    <div v-if="commentData?.pages[0]?.result?.data?.length === 0" class="text-center text-sm text-[--text-2] mt-4">
      暂无评论，快来发表第一条评论吧~
    </div>
    <div style="padding-bottom: 120px;">
      <div v-for="(group, index) in commentData?.pages" :key="index">
        <PostDetailContentComment v-if="group.result.data.length > 0" :data="group.result.data"
          :postMasterUid="data?.userInfo?.uid" :info="data" :postId="postId" @refreshUpdate="refetch" />
      </div>
    </div>

  </div>
</template>

<style scoped lang="scss"></style>
